<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>权限组管理</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body class="bg-gray-50">
    <div class="container mx-auto px-4 py-6">
        <!-- 页面标题和操作按钮 -->
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-bold text-gray-800">权限组管理</h1>
            <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded" onclick="openModal('addPermissionGroupModal')">
                <i class="fas fa-plus mr-2"></i>添加权限组
            </button>
        </div>

        <!-- 搜索和筛选 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="col-span-1">
                    <label class="block text-sm font-medium text-gray-700 mb-1">权限组名称</label>
                    <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入权限组名称">
                </div>
                <div class="col-span-1">
                    <label class="block text-sm font-medium text-gray-700 mb-1">权限组编码</label>
                    <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入权限组编码">
                </div>
                <div class="col-span-1">
                    <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                    <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                        <option value="">全部</option>
                        <option value="active">启用</option>
                        <option value="inactive">禁用</option>
                    </select>
                </div>
            </div>
            <div class="flex justify-end mt-4">
                <button class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded mr-2">
                    重置
                </button>
                <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">
                    搜索
                </button>
            </div>
        </div>

        <!-- 权限组列表 -->
        <div class="bg-white rounded-lg shadow-sm overflow-hidden">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                权限组名称
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                权限组编码
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                权限数量
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                描述
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                状态
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                操作
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">系统管理权限组</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">SYS_ADMIN</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">15</div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-500">系统管理相关的所有权限</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                    启用
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <button class="text-indigo-600 hover:text-indigo-900 mr-2" onclick="openModal('editPermissionGroupModal')">编辑</button>
                                <button class="text-red-600 hover:text-red-900" onclick="openModal('deletePermissionGroupModal')">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">用户管理权限组</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">USER_ADMIN</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">8</div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-500">用户管理相关的所有权限</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                    启用
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <button class="text-indigo-600 hover:text-indigo-900 mr-2" onclick="openModal('editPermissionGroupModal')">编辑</button>
                                <button class="text-red-600 hover:text-red-900" onclick="openModal('deletePermissionGroupModal')">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">酒店管理权限组</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">HOTEL_ADMIN</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">12</div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-500">酒店管理相关的所有权限</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                    启用
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <button class="text-indigo-600 hover:text-indigo-900 mr-2" onclick="openModal('editPermissionGroupModal')">编辑</button>
                                <button class="text-red-600 hover:text-red-900" onclick="openModal('deletePermissionGroupModal')">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">房间管理权限组</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">ROOM_ADMIN</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">6</div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-500">房间管理相关的所有权限</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                    启用
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <button class="text-indigo-600 hover:text-indigo-900 mr-2" onclick="openModal('editPermissionGroupModal')">编辑</button>
                                <button class="text-red-600 hover:text-red-900" onclick="openModal('deletePermissionGroupModal')">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">预订管理权限组</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">BOOKING_ADMIN</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">9</div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-500">预订管理相关的所有权限</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                    启用
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <button class="text-indigo-600 hover:text-indigo-900 mr-2" onclick="openModal('editPermissionGroupModal')">编辑</button>
                                <button class="text-red-600 hover:text-red-900" onclick="openModal('deletePermissionGroupModal')">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">财务管理权限组</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">FINANCE_ADMIN</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">7</div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-500">财务管理相关的所有权限</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                    禁用
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <button class="text-indigo-600 hover:text-indigo-900 mr-2" onclick="openModal('editPermissionGroupModal')">编辑</button>
                                <button class="text-red-600 hover:text-red-900" onclick="openModal('deletePermissionGroupModal')">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- 分页 -->
            <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
                <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                    <div>
                        <p class="text-sm text-gray-700">
                            显示第 <span class="font-medium">1</span> 至 <span class="font-medium">6</span> 条，共 <span class="font-medium">12</span> 条记录
                        </p>
                    </div>
                    <div>
                        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                <span class="sr-only">上一页</span>
                                <i class="fas fa-chevron-left"></i>
                            </a>
                            <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-indigo-50 text-sm font-medium text-indigo-600 hover:bg-gray-50">
                                1
                            </a>
                            <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                2
                            </a>
                            <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                3
                            </a>
                            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                <span class="sr-only">下一页</span>
                                <i class="fas fa-chevron-right"></i>
                            </a>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加权限组模态框 -->
    <div id="addPermissionGroupModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
        <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">添加权限组</h3>
                <button class="text-gray-400 hover:text-gray-500" onclick="closeModal('addPermissionGroupModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="mt-2">
                <form>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">权限组名称</label>
                            <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入权限组名称">
                        </div>
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">权限组编码</label>
                            <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入权限组编码">
                        </div>
                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">权限组描述</label>
                            <textarea rows="3" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入权限组描述"></textarea>
                        </div>
                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                            <div class="flex items-center space-x-4">
                                <div class="flex items-center">
                                    <input type="radio" id="add-status-active" name="add-status" value="active" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" checked>
                                    <label for="add-status-active" class="ml-2 block text-sm text-gray-700">启用</label>
                                </div>
                                <div class="flex items-center">
                                    <input type="radio" id="add-status-inactive" name="add-status" value="inactive" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
                                    <label for="add-status-inactive" class="ml-2 block text-sm text-gray-700">禁用</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">选择权限</label>
                            <div class="border border-gray-300 rounded-md p-4 h-64 overflow-y-auto">
                                <div class="mb-4">
                                    <h4 class="text-sm font-medium text-gray-700 mb-2">系统管理</h4>
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                                        <div class="flex items-center">
                                            <input type="checkbox" id="perm-sys-1" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                                            <label for="perm-sys-1" class="ml-2 block text-sm text-gray-700">查看系统设置</label>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="checkbox" id="perm-sys-2" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                                            <label for="perm-sys-2" class="ml-2 block text-sm text-gray-700">修改系统设置</label>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="checkbox" id="perm-sys-3" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                                            <label for="perm-sys-3" class="ml-2 block text-sm text-gray-700">查看系统日志</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <h4 class="text-sm font-medium text-gray-700 mb-2">用户管理</h4>
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                                        <div class="flex items-center">
                                            <input type="checkbox" id="perm-user-1" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                                            <label for="perm-user-1" class="ml-2 block text-sm text-gray-700">查看用户列表</label>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="checkbox" id="perm-user-2" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                                            <label for="perm-user-2" class="ml-2 block text-sm text-gray-700">创建用户</label>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="checkbox" id="perm-user-3" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                                            <label for="perm-user-3" class="ml-2 block text-sm text-gray-700">编辑用户</label>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="checkbox" id="perm-user-4" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                                            <label for="perm-user-4" class="ml-2 block text-sm text-gray-700">删除用户</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <h4 class="text-sm font-medium text-gray-700 mb-2">酒店管理</h4>
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                                        <div class="flex items-center">
                                            <input type="checkbox" id="perm-hotel-1" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                                            <label for="perm-hotel-1" class="ml-2 block text-sm text-gray-700">查看酒店列表</label>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="checkbox" id="perm-hotel-2" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                                            <label for="perm-hotel-2" class="ml-2 block text-sm text-gray-700">添加酒店</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex justify-end mt-6">
                        <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded mr-2" onclick="closeModal('addPermissionGroupModal')">
                            取消
                        </button>
                        <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">
                            保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 编辑权限组模态框 -->
    <div id="editPermissionGroupModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
        <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">编辑权限组</h3>
                <button class="text-gray-400 hover:text-gray-500" onclick="closeModal('editPermissionGroupModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="mt-2">
                <form>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">权限组名称</label>
                            <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" value="系统管理权限组">
                        </div>
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">权限组编码</label>
                            <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" value="SYS_ADMIN">
                        </div>
                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">权限组描述</label>
                            <textarea rows="3" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">系统管理相关的所有权限</textarea>
                        </div>
                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                            <div class="flex items-center space-x-4">
                                <div class="flex items-center">
                                    <input type="radio" id="edit-status-active" name="edit-status" value="active" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" checked>
                                    <label for="edit-status-active" class="ml-2 block text-sm text-gray-700">启用</label>
                                </div>
                                <div class="flex items-center">
                                    <input type="radio" id="edit-status-inactive" name="edit-status" value="inactive" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
                                    <label for="edit-status-inactive" class="ml-2 block text-sm text-gray-700">禁用</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">选择权限</label>
                            <div class="border border-gray-300 rounded-md p-4 h-64 overflow-y-auto">
                                <div class="mb-4">
                                    <h4 class="text-sm font-medium text-gray-700 mb-2">系统管理</h4>
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                                        <div class="flex items-center">
                                            <input type="checkbox" id="edit-perm-sys-1" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" checked>
                                            <label for="edit-perm-sys-1" class="ml-2 block text-sm text-gray-700">查看系统设置</label>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="checkbox" id="edit-perm-sys-2" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" checked>
                                            <label for="edit-perm-sys-2" class="ml-2 block text-sm text-gray-700">修改系统设置</label>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="checkbox" id="edit-perm-sys-3" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" checked>
                                            <label for="edit-perm-sys-3" class="ml-2 block text-sm text-gray-700">查看系统日志</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <h4 class="text-sm font-medium text-gray-700 mb-2">用户管理</h4>
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                                        <div class="flex items-center">
                                            <input type="checkbox" id="edit-perm-user-1" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" checked>
                                            <label for="edit-perm-user-1" class="ml-2 block text-sm text-gray-700">查看用户列表</label>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="checkbox" id="edit-perm-user-2" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" checked>
                                            <label for="edit-perm-user-2" class="ml-2 block text-sm text-gray-700">创建用户</label>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="checkbox" id="edit-perm-user-3" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                                            <label for="edit-perm-user-3" class="ml-2 block text-sm text-gray-700">编辑用户</label>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="checkbox" id="edit-perm-user-4" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                                            <label for="edit-perm-user-4" class="ml-2 block text-sm text-gray-700">删除用户</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <h4 class="text-sm font-medium text-gray-700 mb-2">酒店管理</h4>
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                                        <div class="flex items-center">
                                            <input type="checkbox" id="edit-perm-hotel-1" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" checked>
                                            <label for="edit-perm-hotel-1" class="ml-2 block text-sm text-gray-700">查看酒店列表</label>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="checkbox" id="edit-perm-hotel-2" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" checked>
                                            <label for="edit-perm-hotel-2" class="ml-2 block text-sm text-gray-700">添加酒店</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex justify-end mt-6">
                        <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded mr-2" onclick="closeModal('editPermissionGroupModal')">
                            取消
                        </button>
                        <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">
                            保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 删除权限组确认模态框 -->
    <div id="deletePermissionGroupModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
        <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-2/5 lg:w-1/3 shadow-lg rounded-md bg-white">
            <div class="mt-3 text-center">
                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
                    <i class="fas fa-exclamation-triangle text-red-600"></i>
                </div>
                <h3 class="text-lg leading-6 font-medium text-gray-900 mt-4">确认删除</h3>
                <div class="mt-2 px-7 py-3">
                    <p class="text-sm text-gray-500">
                        您确定要删除该权限组吗？此操作不可恢复，且可能影响已分配该权限组的角色和用户。
                    </p>
                </div>
                <div class="flex justify-center mt-4 px-4 py-3">
                    <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded mr-2" onclick="closeModal('deletePermissionGroupModal')">
                        取消
                    </button>
                    <button type="button" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
                        确认删除
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 权限组详情模态框 -->
    <div id="viewPermissionGroupModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
        <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">权限组详情</h3>
                <button class="text-gray-400 hover:text-gray-500" onclick="closeModal('viewPermissionGroupModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="mt-2">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="col-span-1">
                        <p class="text-sm font-medium text-gray-500">权限组名称</p>
                        <p class="mt-1 text-sm text-gray-900">系统管理权限组</p>
                    </div>
                    <div class="col-span-1">
                        <p class="text-sm font-medium text-gray-500">权限组编码</p>
                        <p class="mt-1 text-sm text-gray-900">SYS_ADMIN</p>
                    </div>
                    <div class="col-span-1">
                        <p class="text-sm font-medium text-gray-500">权限数量</p>
                        <p class="mt-1 text-sm text-gray-900">15</p>
                    </div>
                    <div class="col-span-1">
                        <p class="text-sm font-medium text-gray-500">状态</p>
                        <p class="mt-1">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                启用
                            </span>
                        </p>
                    </div>
                    <div class="col-span-2">
                        <p class="text-sm font-medium text-gray-500">权限组描述</p>
                        <p class="mt-1 text-sm text-gray-900">系统管理相关的所有权限</p>
                    </div>
                </div>
                
                <!-- 权限列表 -->
                <div class="mt-6">
                    <h4 class="text-base font-medium text-gray-900 mb-3">包含权限</h4>
                    <div class="border border-gray-300 rounded-md p-4 max-h-64 overflow-y-auto">
                        <div class="mb-4">
                            <h5 class="text-sm font-medium text-gray-700 mb-2">系统管理</h5>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                                <div class="flex items-center">
                                    <span class="text-sm text-gray-700">查看系统设置</span>
                                </div>
                                <div class="flex items-center">
                                    <span class="text-sm text-gray-700">修改系统设置</span>
                                </div>
                                <div class="flex items-center">
                                    <span class="text-sm text-gray-700">查看系统日志</span>
                                </div>
                            </div>
                        </div>
                        <div class="mb-4">
                            <h5 class="text-sm font-medium text-gray-700 mb-2">用户管理</h5>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                                <div class="flex items-center">
                                    <span class="text-sm text-gray-700">查看用户列表</span>
                                </div>
                                <div class="flex items-center">
                                    <span class="text-sm text-gray-700">创建用户</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 关联角色列表 -->
                <div class="mt-6">
                    <h4 class="text-base font-medium text-gray-900 mb-3">关联角色</h4>
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    角色名称
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    角色编码
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    状态
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">系统管理员</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">ADMIN</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                        启用
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">IT管理员</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-500">IT_ADMIN</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                        启用
                                    </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <div class="flex justify-end mt-6">
                    <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded" onclick="closeModal('viewPermissionGroupModal')">
                        关闭
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script>
        // 打开模态框
        function openModal(modalId) {
            document.getElementById(modalId).classList.remove('hidden');
        }
        
        // 关闭模态框
        function closeModal(modalId) {
            document.getElementById(modalId).classList.add('hidden');
        }
        
        // 添加点击事件，点击表格行查看详情
        document.addEventListener('DOMContentLoaded', function() {
            const rows = document.querySelectorAll('tbody tr');
            rows.forEach(row => {
                row.addEventListener('click', function(e) {
                    // 如果点击的是按钮，不触发查看详情
                    if (e.target.tagName === 'BUTTON' || e.target.closest('button')) {
                        return;
                    }
                    openModal('viewPermissionGroupModal');
                });
                
                // 添加鼠标悬停效果
                row.classList.add('hover:bg-gray-50', 'cursor-pointer');
            });
            
            // 全选/取消全选功能
            const moduleCheckboxes = document.querySelectorAll('.module-checkbox');
            moduleCheckboxes.forEach(checkbox => {                checkbox.addEventListener('change', function() {
                    const moduleId = this.dataset.module;
                    const isChecked = this.checked;
                    const permissionCheckboxes = document.querySelectorAll(`.permission-checkbox[data-module="${moduleId}"]`);
                    
                    // 设置该模块下所有权限的选中状态
                    permissionCheckboxes.forEach(permCheckbox => {
                        permCheckbox.checked = isChecked;
                    });
                });
            });
            
            // 权限选择状态变化时，检查是否需要更新模块选择状态
            const permissionCheckboxes = document.querySelectorAll('.permission-checkbox');
            permissionCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const moduleId = this.dataset.module;
                    const moduleCheckbox = document.querySelector(`.module-checkbox[data-module="${moduleId}"]`);
                    const modulePermissions = document.querySelectorAll(`.permission-checkbox[data-module="${moduleId}"]`);
                    
                    // 检查该模块下所有权限是否都被选中
                    const allChecked = Array.from(modulePermissions).every(permCheckbox => permCheckbox.checked);
                    const anyChecked = Array.from(modulePermissions).some(permCheckbox => permCheckbox.checked);
                    
                    // 更新模块选择状态
                    if (moduleCheckbox) {
                        moduleCheckbox.checked = allChecked;
                        moduleCheckbox.indeterminate = anyChecked && !allChecked;
                    }
                });
            });
            
            // 搜索功能
            const searchButton = document.querySelector('#searchButton');
            const resetButton = document.querySelector('#resetButton');
            
            if (searchButton) {
                searchButton.addEventListener('click', function() {
                    // 获取搜索条件
                    const nameInput = document.querySelector('#groupName').value;
                    const codeInput = document.querySelector('#groupCode').value;
                    const statusSelect = document.querySelector('#groupStatus').value;
                    
                    // 这里可以添加实际的搜索逻辑，例如发送AJAX请求
                    console.log('搜索条件:', { name: nameInput, code: codeInput, status: statusSelect });
                    
                    // 模拟搜索结果
                    alert('搜索功能已触发，请查看控制台日志');
                });
            }
            
            if (resetButton) {
                resetButton.addEventListener('click', function() {
                    // 重置搜索表单
                    const searchForm = document.querySelector('#searchForm');
                    if (searchForm) {
                        searchForm.reset();
                    }
                });
            }
            
            // 表单提交处理
            const addForm = document.querySelector('#addPermissionGroupForm');
            const editForm = document.querySelector('#editPermissionGroupForm');
            
            if (addForm) {
                addForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    
                    // 获取表单数据
                    const formData = new FormData(this);
                    const permissionData = {};
                    
                    // 将FormData转换为对象
                    for (const [key, value] of formData.entries()) {
                        permissionData[key] = value;
                    }
                    
                    // 获取选中的权限
                    const selectedPermissions = [];
                    const permissionCheckboxes = document.querySelectorAll('#addPermissionGroupModal input[type="checkbox"]:checked');
                    permissionCheckboxes.forEach(checkbox => {
                        if (checkbox.id.startsWith('perm-')) {
                            selectedPermissions.push(checkbox.id);
                        }
                    });
                    
                    permissionData.permissions = selectedPermissions;
                    
                    // 这里可以添加实际的保存逻辑，例如发送AJAX请求
                    console.log('添加权限组数据:', permissionData);
                    
                    // 模拟保存成功
                    alert('权限组添加成功！');
                    closeModal('addPermissionGroupModal');
                });
            }
            
            if (editForm) {
                editForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    
                    // 获取表单数据
                    const formData = new FormData(this);
                    const permissionData = {};
                    
                    // 将FormData转换为对象
                    for (const [key, value] of formData.entries()) {
                        permissionData[key] = value;
                    }
                    
                    // 获取选中的权限
                    const selectedPermissions = [];
                    const permissionCheckboxes = document.querySelectorAll('#editPermissionGroupModal input[type="checkbox"]:checked');
                    permissionCheckboxes.forEach(checkbox => {
                        if (checkbox.id.startsWith('edit-perm-')) {
                            selectedPermissions.push(checkbox.id.replace('edit-', ''));
                        }
                    });
                    
                    permissionData.permissions = selectedPermissions;
                    
                    // 这里可以添加实际的保存逻辑，例如发送AJAX请求
                    console.log('编辑权限组数据:', permissionData);
                    
                    // 模拟保存成功
                    alert('权限组更新成功！');
                    closeModal('editPermissionGroupModal');
                });
            }
            
            // 删除权限组确认
            const deleteConfirmButton = document.querySelector('#deleteConfirmButton');
            if (deleteConfirmButton) {
                deleteConfirmButton.addEventListener('click', function() {
                    // 这里可以添加实际的删除逻辑，例如发送AJAX请求
                    console.log('删除权限组');
                    
                    // 模拟删除成功
                    alert('权限组删除成功！');
                    closeModal('deletePermissionGroupModal');
                });
            }
            
            // 初始化页面时，为表单元素添加ID
            function initializeFormElements() {
                // 搜索表单
                const searchNameInput = document.querySelector('.bg-white.rounded-lg.shadow-sm.p-4.mb-6 input[placeholder="请输入权限组名称"]');
                const searchCodeInput = document.querySelector('.bg-white.rounded-lg.shadow-sm.p-4.mb-6 input[placeholder="请输入权限组编码"]');
                const searchStatusSelect = document.querySelector('.bg-white.rounded-lg.shadow-sm.p-4.mb-6 select');
                const searchForm = document.querySelector('.bg-white.rounded-lg.shadow-sm.p-4.mb-6');
                const searchButton = document.querySelector('.bg-white.rounded-lg.shadow-sm.p-4.mb-6 button.bg-indigo-600');
                const resetButton = document.querySelector('.bg-white.rounded-lg.shadow-sm.p-4.mb-6 button.bg-gray-500');
                
                if (searchForm) searchForm.id = 'searchForm';
                if (searchNameInput) searchNameInput.id = 'groupName';
                if (searchCodeInput) searchCodeInput.id = 'groupCode';
                if (searchStatusSelect) searchStatusSelect.id = 'groupStatus';
                if (searchButton) searchButton.id = 'searchButton';
                if (resetButton) resetButton.id = 'resetButton';
                
                // 添加表单
                const addForm = document.querySelector('#addPermissionGroupModal form');
                if (addForm) addForm.id = 'addPermissionGroupForm';
                
                // 编辑表单
                const editForm = document.querySelector('#editPermissionGroupModal form');
                if (editForm) editForm.id = 'editPermissionGroupForm';
                
                // 删除确认按钮
                const deleteConfirmButton = document.querySelector('#deletePermissionGroupModal button.bg-red-600');
                if (deleteConfirmButton) deleteConfirmButton.id = 'deleteConfirmButton';
                
                // 为权限复选框添加数据属性
                const addModuleCheckboxes = document.querySelectorAll('#addPermissionGroupModal h4');
                addModuleCheckboxes.forEach((header, index) => {
                    const moduleId = `module-${index}`;
                    const checkboxes = header.nextElementSibling.querySelectorAll('input[type="checkbox"]');
                    
                    // 创建模块全选复选框
                    const moduleCheckbox = document.createElement('input');
                    moduleCheckbox.type = 'checkbox';
                    moduleCheckbox.className = 'module-checkbox focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded mr-2';
                    moduleCheckbox.dataset.module = moduleId;
                    
                    // 将全选复选框添加到标题前
                    header.prepend(moduleCheckbox);
                    
                    // 为每个权限复选框添加数据属性
                    checkboxes.forEach(checkbox => {
                        checkbox.classList.add('permission-checkbox');
                        checkbox.dataset.module = moduleId;
                    });
                });
                
                // 为编辑模态框中的权限复选框添加数据属性
                const editModuleCheckboxes = document.querySelectorAll('#editPermissionGroupModal h4');
                editModuleCheckboxes.forEach((header, index) => {
                    const moduleId = `edit-module-${index}`;
                    const checkboxes = header.nextElementSibling.querySelectorAll('input[type="checkbox"]');
                    
                    // 创建模块全选复选框
                    const moduleCheckbox = document.createElement('input');
                    moduleCheckbox.type = 'checkbox';
                    moduleCheckbox.className = 'module-checkbox focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded mr-2';
                    moduleCheckbox.dataset.module = moduleId;
                    
                    // 将全选复选框添加到标题前
                    header.prepend(moduleCheckbox);
                    
                    // 为每个权限复选框添加数据属性
                    checkboxes.forEach(checkbox => {
                        checkbox.classList.add('permission-checkbox');
                        checkbox.dataset.module = moduleId;
                    });
                });
            }
            
            // 初始化页面元素
            initializeFormElements();
        });
    </script>
</body>
</html>